<template>
    <div class="pageCon">
        <el-button type="primary" @click="newAdvice">意见反馈</el-button>
        <!-- 反馈意见弹窗 -->
        <el-dialog v-model="adviceDialogVisible" title="意见反馈" width="30%">
            <el-form>
                <el-form-item label="反馈内容">
                    <el-input v-model="adviceContent" style="height: 200px;width: 90%;" type="textarea"
                        placeholder="请输入您的反馈内容" :rows="10" maxlength="300" show-word-limit />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="adviceDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="sendAdvice">提交</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 反馈意见表格 -->
        <el-table :data="adviceList" style="width: 100%; margin-top: 20px;" border>
            <el-table-column prop="User" label="姓名" width="140px">
                <template #default="{ row }">
                    <div v-html="row.User.name"></div>
                </template>
            </el-table-column>
            <el-table-column prop="User" label="工号" width="140px">
                <template #default="{ row }">
                    <div v-html="row.User.jobNumber"></div>
                </template>
            </el-table-column>
            <el-table-column prop="content" label="反馈内容" />
            <el-table-column prop="date" label="反馈时间">
                <template #default="{ row }">
                    {{ row.date }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button type="text" @click="deleteAdvice(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" style="margin-top: 20px;" />
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { Api } from '@/api'
import { ElMessage } from 'element-plus'

const adviceDialogVisible = ref(false) // 反馈意见弹窗的显示状态
const adviceContent = ref('') // 反馈内容
const adviceList = ref([]) // 反馈意见列表
const currentPage = ref(1) // 当前页码
const pageSize = ref(10) // 每页显示条数
const total = ref(0) // 总条数

// 获取反馈意见列表
const getAdviceList = async () => {
    try {
        const response = await Api.getAdvice({ page: currentPage.value, pageSize: pageSize.value, ifAll: true });
        if (response.status === 200) {
            console.log(response);

            adviceList.value = response.data;
            total.value = response.total;
        } else {
            ElMessage.error('获取反馈意见列表失败');
        }
    } catch (error) {
        ElMessage.error('获取反馈意见列表失败');
    }
}

// 提交反馈意见
const sendAdvice = async () => {
    if (!adviceContent.value) {
        ElMessage.warning('反馈内容不能为空');
        return;
    }
    try {
        const response = await Api.sendAdvice({ content: adviceContent.value });
        if (response.status === 200) {
            ElMessage.success('反馈意见提交成功');
            adviceDialogVisible.value = false;
            adviceContent.value = '';
            getAdviceList(); // 刷新反馈意见列表
        } else {
            ElMessage.error('反馈意见提交失败');
        }
    } catch (error) {
        ElMessage.error('反馈意见提交失败');
    }
}

// 删除反馈意见
const deleteAdvice = async (id) => {
    try {
        const response = await Api.deleteAdvice({ id });
        if (response.status === 200) {
            ElMessage.success('反馈意见删除成功');
            getAdviceList(); // 刷新反馈意见列表
        } else {
            ElMessage.error('反馈意见删除失败');
        }
    } catch (error) {
        ElMessage.error('反馈意见删除失败');
    }
}

// 打开反馈意见弹窗
const newAdvice = () => {
    adviceDialogVisible.value = true;
}

// 处理每页显示条数变化
const handleSizeChange = (newSize) => {
    pageSize.value = newSize;
    getAdviceList();
}

// 处理当前页码变化
const handleCurrentChange = (newPage) => {
    currentPage.value = newPage;
    getAdviceList();
}

onMounted(() => {
    getAdviceList(); // 页面加载时获取反馈意见列表
})
</script>